<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '门店详情',
  },
}
</route>
<template>
  <view class="store-detail-page min-h-screen bg-gray-50 pb-20">
    <view class="bg-white p-4 relative">
      <image src="@/static/images/收藏后.png" @click.stop="subscribe" v-if="isCollect == 0"
        class="w-10.5 h-7.5 rounded-full absolute right-4 top-4" mode="scaleToFill" />
      <image src="@/static/images/收藏前.png" @click.stop="cancelSubscribe" v-else
        class="w-10.5 h-7.5 rounded-full absolute right-4 top-4" mode="scaleToFill" />

      <button @click="openShare" open-type="share" class="p-0 bg-white m-0 absolute right-16 top-2">
        <image src="@/static/images/分享前.png" class="w-8 h-8 " mode="scaleToFill" />
      </button>

      <view class="text-xl font-bold text-gray-800">{{ store.name }}</view>

      <view class="flex justify-between items-center mt-2">
        <view class="flex items-center">
          <text>评级：</text>

          <view class="px-2 py-0.5 rounded text-xs text-white mr-2" :class="{
            'bg-green-500': store.grade === '优',
            'bg-blue-500': store.grade === '良',
            'bg-yellow-500': store.grade === '中',
            'bg-red-500': store.grade === '及格',
          }">
            {{ store?.grade }}
          </view>

          <view class="flex items-center">
            <text>分数：</text>
            <text class="text-orange-500 text-xl ml-1">
              {{ store?.score }}
            </text>
            <text class="text-orange-500 text-sm ml-1">{{ store.rating }}</text>
          </view>
        </view>
      </view>

      <view class="mt-4 space-y-2">
        <view class="flex">
          <text class="text-gray-500 text-sm w-14">分类：</text>
          <text class="text-gray-800 text-sm rounded bg-gray-1 px-2">{{ store.cname }}</text>
        </view>

        <view class="flex flex-wrap">
          <text v-for="(tag, index) in labelList" :key="index"
            class="px-2 py-0.5 mr-1 bg-orange-50 text-orange-500 text-xs rounded-full">
            {{ tag }}
          </text>
        </view>

        <view class="flex items-center">
          <text class="text-gray-500 text-sm w-14">推荐人数</text>
          <view class="flex items-center">
            <text class="text-gray-800 text-sm">{{ store.assistNumber || 0 }}</text>
          </view>

          <view class="mx-2 px-3 py-1 bg-orange-500 text-white text-sm rounded-full flex items-center"
            @click="openSupportModal">
            <i class="iconfont icon-zantong w-4 text-4 mr-1"></i>
            助力
          </view>
        </view>
      </view>
    </view>

    <view class="bg-white box-border mt-2 p-2 grid grid-cols-2 gap-2 w-full">
      <view class="mb-4">
        <view class="text-gray-800 font-medium mb-2">门店实景</view>
        <view class="aspect-square rounded-lg overflow-hidden relative">
          <wd-swiper :list="swiperList" autoplay class="w-full h-full object-cover"></wd-swiper>
        </view>
      </view>

      <view v-if="visit && visit.darkImage">
        <view class="text-gray-800 font-medium mb-2">群主探访图</view>
        <view class="aspect-square rounded-lg overflow-hidden relative">
          <image :src="visit?.darkImage" :alt="`${store.name} `" class="w-full h-full object-cover" />
        </view>
      </view>
    </view>

    <view class="bg-white mt-2 p-4 min-h-20" v-if="store && store.details" v-html="store.details"></view>

    <view class="bg-white mt-2 p-4">
      <view class="flex items-start mb-3 m-h-5 leading-5 gap-2" @click="toMap">
        <i class="iconfont icon-zuobiao w-5 text-5 mr-2 mt-0.5"></i>
        <view class="text-gray-800 flex-1">{{ store.address }}</view>
        <view class="text-sm text-orange-500 mr-4 flex items-center">
          <i class="iconfont icon-daohang_o w-3 text-3 mr-1"></i>
          导航
        </view>
      </view>

      <view class="flex flex-row items-center mb-3 gap-2" @click="makePhone">
        <i class="iconfont icon-dianhua w-5 text-5 mr-2"></i>
        <view class="text-gray-800">{{ store.telephone }}</view>
      </view>

      <view class="flex flex-row items-center h-5 leading-5 gap-2" v-if="store.businessHours">
        <i class="iconfont icon-shizhong w-5 text-5 mr-2"></i>
        <text class="text-gray-800 text-xs">{{ store.businessHours }}</text>
      </view>
    </view>

    <view class="bg-white mt-2 p-4" v-if="visit">
      <view class="text-gray-800 font-medium mb-4">探访报告</view>

      <!-- Overall Score -->
      <view class="text-center mb-6">
        <view class="text-4xl font-bold text-orange-500">
          {{ visit?.comprehensiveScore }}
        </view>
        <view class="text-sm text-gray-500 mt-1">综合评分</view>
      </view>

      <view class="space-y-4">
        <view class="flex items-center">
          <text class="text-gray-700 w-20 text-3">位置便利度：</text>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" :style="{ width: `${visit.position * 10}%` }"></view>
          </view>
          <text class="text-orange-500 font-medium">{{ visit.position }}</text>
        </view>

        <view class="flex items-center">
          <text class="text-gray-700 w-20 text-3">环境卫生：</text>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" :style="{ width: `${visit.environment * 10}%` }"></view>
          </view>
          <text class="text-orange-500 font-medium">{{ visit?.environment }}</text>
        </view>

        <view class="flex items-center">
          <text class="text-gray-700 w-20 text-3">服务质量：</text>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" :style="{ width: `${visit.qualityService * 10}%` }"></view>
          </view>
          <text class="text-orange-500 font-medium">{{ visit?.qualityService }}</text>
        </view>

        <view class="flex items-center">
          <text class="text-gray-700 w-20 text-3">菜品质量：</text>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" :style="{ width: `${visit.qualityDishes * 10}%` }"></view>
          </view>
          <text class="text-orange-500 font-medium">{{ visit?.qualityDishes }}</text>
        </view>

        <view class="flex items-center">
          <text class="text-gray-700 w-20 text-3">性价比：</text>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" :style="{ width: `${visit.costEffectiveness * 10}%` }">
            </view>
          </view>
          <text class="text-orange-500 font-medium">{{ visit?.costEffectiveness }}</text>
        </view>
      </view>

      <view class="mt-6 p-3 bg-gray-50 rounded-lg">
        <view class="text-gray-700 font-medium mb-2">综合评价</view>
        <view class="text-orange-600 text-sm">{{ visit?.comprehensiveEvaluation }}</view>
      </view>
    </view>

    <view class="bg-white mt-2 p-4" v-if="visit">
      <view class="text-gray-800 font-medium mb-4">探访记录表</view>

      <view class="grid grid-cols-12 bg-gray-100 p-2 rounded-t-lg text-sm font-medium text-gray-700">
        <view class="col-span-3">探访项目</view>
        <view class="col-span-4 text-center">评分</view>
        <view class="col-span-5">备注</view>
      </view>

      <view class="border-b border-gray-100">
        <view class="grid grid-cols-12 p-2 bg-gray-50 text-sm font-medium text-gray-700">
          <view class="col-span-12">环境</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">店面卫生</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.storeHygiene.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.storeHygiene.comment }}</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">座位舒适度</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.seatComfort.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.seatComfort.comment }}</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">噪音水平</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.noiseLevel.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.noiseLevel.comment }}</view>
        </view>
      </view>

      <view>
        <view class="grid grid-cols-12 p-2 bg-gray-50 text-sm font-medium text-gray-700">
          <view class="col-span-12">服务</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">服务态度</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.serviceAttitude.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.serviceAttitude.comment }}</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">上菜速度</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.serviceSpeed.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.serviceSpeed.comment }}</view>
        </view>

        <view class="grid grid-cols-12 p-2 border-t border-gray-100 text-sm">
          <view class="col-span-3 text-gray-700">投诉处理</view>
          <view class="col-span-4 text-center text-orange-500 font-medium">
            {{ visit.complaints.score }}
          </view>
          <view class="col-span-5 text-gray-600">{{ visit.complaints.comment }}</view>
        </view>
      </view>

      <view class="mt-4 text-sm text-gray-500 flex justify-between">
        <view>探访日期：{{ visit.addTime }}</view>
        <view>探访人员：{{ visit.staff }}</view>
      </view>

      <view class="mt-4 p-3 border border-orange-200 rounded-lg bg-orange-50 flex items-center">
        <view class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center mr-3">
          <CheckCircle class="w-6 h-6 text-white" />
        </view>
        <view>
          <view class="font-medium text-gray-800">上饶百社区认证</view>
          <view class="text-xs text-gray-600 mt-0.5">由专业探访员实地评测</view>
        </view>
      </view>
    </view>

    <!-- 5. Limited-Time Offers -->
    <view class="bg-white mt-2 p-4" v-if="limitedTimeProducts.length > 0">
      <view class="flex justify-between items-center mb-4">
        <view class="text-gray-800 font-medium">限时抢购</view>
      </view>

      <view class="space-y-4">
        <view v-for="(product, index) in limitedTimeProducts" :key="index"
          class="flex border-b border-gray-100 pb-4 last:border-0">
          <image :src="product.image" :alt="product.name" class="w-24 h-24 object-cover rounded-lg" />

          <view class="ml-3 flex-1">
            <view class="font-medium text-gray-800">{{ product.name }}</view>
            <view class="text-xs text-gray-500 mt-1">{{ product.keyword }}</view>

            <view class="mt-2 flex items-baseline">
              <text class="text-lg font-bold text-orange-500">¥{{ product.vipPrice }}</text>
              <text class="text-xs text-gray-400 line-through ml-2">¥{{ product.price }}</text>
            </view>

            <view class="flex justify-between items-center mt-2">
              <text class="text-xs text-gray-500">已售{{ product.sales }}份</text>
              <view class="px-3 py-1 bg-orange-500 text-white text-sm rounded-full" @click="toProduct(product)">
                立即抢购
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Loading More -->
      <view v-if="isLoading" class="mt-4 flex items-center justify-center py-4">
        <view class="w-5 h-5 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mr-2"></view>
        <text class="text-sm text-gray-600">加载更多中...</text>
      </view>

      <view v-else class="mt-4 text-center">
        <view class="px-4 py-2 border border-gray-200 rounded-lg text-sm text-gray-600 w-full"
          @click="loadMoreProducts">
          查看更多
        </view>
      </view>
    </view>

    <!-- Fixed Bottom Action Bar -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3 flex items-center z-10">
      <wd-button type="icon" icon="share" open-type="share" @click="openShare"></wd-button>
      <view @click="toMap" class="flex-1 bg-orange-500 text-white py-3 rounded-full font-medium ml-2 text-center">
        立即前往
      </view>
    </view>

    <view v-if="showSupportModal" class="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-2"
      @click="showSupportModal = false">
      <view class="bg-white rounded-lg w-full max-w-xs p-2" @click.stop>
        <view class="text-center font-bold text-gray-800 mb-3">确认助力</view>
        <view class="text-center text-gray-600 mb-4">是否确定为"{{ store.name }}"助力？</view>
        <view class="flex space-x-3">
          <view class="flex-1 py-2 border text-center border-gray-300 text-gray-600 rounded-lg"
            @click="showSupportModal = false">
            取消
          </view>
          <wd-button open-type="share" class="flex-1 py-2 bg-orange-500 text-center text-white rounded-lg"
            @click="confirmSupport">
            确定
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

import { CheckCircle } from 'lucide-vue-next'
import { http } from '@/utils/http'

const store = ref(null)
const visit = ref(null)

const swiperList = computed(() => {
  let arr = []
  if (store.value.picture) {
    arr = store.value.picture.split(',')
  }
  return arr
})

const openShare = async () => {
  // uni.showShareMenu({
  //   title: '邻里生活荟',
  //   content: store.value.name,
  //   imageUrl: store.value.picture,
  //   path: '/pages/store/detail?id=' + store.value.id,
  //   success: (result) => {},
  //   fail: (error) => {},
  // })

  uni.showShareMenu({
    title: '邻里生活荟',
    content: store.value.name,
    imageUrl: store.value.picture,
    path: `/pages/store/detail?id=${store.value.id}`,
    success: async (result) => {
      console.log('分享成功', result)
      let resp1 = await http.get('/api/user/assistSharing', { type: 2 })

      if (resp1.code == 200) {
        uni.showToast({
          title: resp1.msg,
          icon: 'none',
          mask: false,
        })
      } else {
        uni.showToast({
          title: resp1.msg,
          icon: 'none',
          mask: false,
        })
      }
    },
  })
}
const makePhone = () => {
  uni.makePhoneCall({
    phoneNumber: store.value.telephone, //仅为示例，并非真实的电话号码
  })
}
const toMap = () => {
  let longitude = store.value.longitude
  let dimension = store.value.dimension
  let storeName = store.value.name
  let address = store.value.address

  uni.navigateTo({
    url:
      '/pages/web/map?longitude=' +
      longitude +
      '&dimension=' +
      dimension +
      '&storeName=' +
      storeName +
      '&address=' +
      address,
  })
}

const labelList = computed(() => {
  let arr = []

  if (store.value.label) {
    arr = store.value.label.split(',')
  }

  return arr
})

const toProduct = (product) => {
  uni.navigateTo({
    url: `/pages/product/detail?scene=${product.id}`,
  })
}

const isCollect = ref(0)

const subscribe = async () => {
  let res = await http.get('/api/collect/collectStore', { storeId: store.value.id })
  if (res.code == 200) {
    getData(store.value.id)
    uni.showToast({
      title: '收藏成功！',
      icon: 'none',
      mask: false,
    })
  }
}

const cancelSubscribe = async () => {
  let res = await http({
    method: 'get',
    url: `/api/collect/removeStore?storeId=${store.value.id}`,
  })
  if (res.code == 200) {
    getData(store.value.id)
    uni.showToast({
      title: '已取消收藏！',
      icon: 'none',
      mask: false,
    })
  }
}

const getData = async (id) => {
  let res = await http.get('/api/store/details', { id })
  if (res.code == 200) {
    store.value = res.data.store
    isCollect.value = res.data.collect

    uni.setNavigationBarTitle({
      title: store.value.name,
    })

    // 获取visit
    let resp = await http.get('/api/visit/list', { storeId: id })
    if (resp.code == 200) {
      if (resp.data.length > 0) {
        visit.value = {
          ...resp.data[0],
        }

        visit.value.storeHygiene = JSON.parse(visit.value.storeHygiene) || {
          score: 0,
          comment: '',
        }
        visit.value.seatComfort = JSON.parse(visit.value.seatComfort) || {
          score: 0,
          comment: '',
        }
        visit.value.noiseLevel = JSON.parse(visit.value.noiseLevel) || {
          score: 0,
          comment: '',
        }
        visit.value.serviceAttitude = JSON.parse(visit.value.serviceAttitude) || {
          score: 0,
          comment: '',
        }
        visit.value.serviceSpeed = JSON.parse(visit.value.serviceSpeed) || {
          score: 0,
          comment: '',
        }
        visit.value.complaints = JSON.parse(visit.value.complaints) || {
          score: 0,
          comment: '',
        }
      }
    }
  }
}

onLoad(async ({ id }) => {
  await getData(id)
  await loadMoreProducts()
})

const showSupportModal = ref(false)

const openSupportModal = () => {
  showSupportModal.value = true
}

const confirmSupport = async () => {
  let res = await http({
    url: '/api/store/assistStore',
    method: 'get',
    data: {
      storeId: store.value.id,
    },
  })

  if (res.code == 200) {
    showSupportModal.value = false

    uni.showToast({
      title: '助力成功！',
      icon: 'none',
      mask: false,
    })

    getData(store.value.id)
  } else {
    showSupportModal.value = false

    uni.showToast({
      title: res.msg,
      icon: 'none',
      mask: false,
    })
  }

  return

  // 获取个人信息中的次数
  let resp = await http.get('/api/user/my')
  if (resp.code == 200) {
    let assist = resp.data.assist
    if (assist == 0) {
      let resp1 = await http.get('/api/user/assistSharing', { type: 2 })

      if (resp1.code == 200) {
        uni.showShareMenu({
          title: '邻里生活荟',
          content: store.value.name,
          imageUrl: store.value.picture,
          path: `/pages/store/detail?id=${store.value.id}`,
        })
      } else {
        showSupportModal.value = false

        uni.showToast({
          title: resp1.msg,
          icon: 'none',
          mask: false,
        })
      }
    } else {
      let res = await http({
        url: '/api/store/assistStore',
        method: 'get',
        data: {
          storeId: store.value.id,
        },
      })

      if (res.code == 200) {
        showSupportModal.value = false
        uni.showToast({
          title: '助力成功！',
          icon: 'none',
          mask: false,
        })
        getData(store.value.id)
      } else {
        showSupportModal.value = false

        uni.showToast({
          title: res.msg,
          icon: 'none',
          mask: false,
        })
      }
    }
  }
}

const showGallery = ref(false)
const galleryType = ref('storefront')
const activeSlide = ref(0)

const currentGalleryImages = computed(() => {
  return galleryType.value === 'storefront' ? store.storefrontImages : store.inspectionImages
})

const openImageGallery = (type, index) => {
  galleryType.value = type
  activeSlide.value = index
  showGallery.value = true
}

const limitedTimeProducts = ref([])

const isLoading = ref(false)

const loadMoreProducts = async () => {
  isLoading.value = true
  try {
    let res = await http.get('/api/home/products', { storeId: store.value.id })
    if (res.code == 200) {
      limitedTimeProducts.value = res.data.products
    }
  } catch (error) {
  } finally {
    isLoading.value = false
  }
}

onShareAppMessage(() => {
  return {
    title: '邻里生活荟',
    content: store.value.name,
    imageUrl: store.value.picture,
    path: `/pages/store/detail?id=${store.value.id}`,
  }
})
onShareTimeline(() => {
  return {
    title: '邻里生活荟',
    content: store.value.name,
    imageUrl: store.value.picture,
    path: `/pages/store/detail?id=${store.value.id}`,
  }
})
</script>

<style scoped>
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subscribe-btn {
  padding: 6rpx 30rpx;
  font-size: 24rpx;
  line-height: 1.5;
  color: #26c57d;
  background-color: #ffffff;
  border: 1px solid #26c57d;
  border-radius: 30rpx;
}
</style>
